<template>
  <div class="app">
    <template v-if="songInfo">
      <div class="img">
        <img class="love" :src="songInfo.pic" />
      </div>
      <div class="info">
        <div class="name">{{ lrc || songInfo.name }}</div>
        <div class="detail">
          {{ songInfo.artist
          }}<template v-if="songInfo.album">({{ songInfo.album }})</template>
        </div>
        <div class="progress" v-if="playInfo">
          <div :style="{ width: playInfo.percent + '%' }"></div>
        </div>
        <div class="time" v-if="playInfo">
          <span class="start">{{ playInfo.now }}</span>
          <span class="end">{{ playInfo.total }}</span>
        </div>
      </div>
    </template>
    <template v-if="!songInfo">
      <div class="no-song">金碟豹·读碟中</div>
    </template>
  </div>
</template>


<script>
export default {
  data() {
    return {
      songInfo: false,
      playInfo: false,
      lrc: false,
    };
  },
  watch: {
    "$store.state.songInfo": {
      handler(songInfo) {
        this.songInfo = songInfo;
        if (songInfo) {
          this.$emit("api", {
            event: "setWindowTitle",
            title: songInfo.name,
          });
          this.lrc = false;
        }
      },
      immediate: true,
      deep: true,
    },
    "$store.state.playInfo": {
      handler(playInfo) {
        this.playInfo = playInfo;
        if (playInfo && playInfo.lrc) {
          this.lrc = playInfo.lrc;
        }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  methods: {},
};
</script>
<style scoped lang="scss">
.app {
  display: flex;
  flex: 1;
  width: 100%;
  color: #fff;
  background-color: #333;
  text-shadow: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  .no-song {
    font-size: 24px;
    padding: 10px 20px 40px 10px;
  }
  .img {
    width: 100px;
    padding: 20px;
    padding-top: 0px;
    img {
      width: 100px;
      height: 100px;
      border-radius: 100%;
    }
  }

  .info {
    padding: 0px 20px 20px 0px;
    flex: 1;
    width: 0px;
    .name {
      font-size: 20px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      height: 27px;
    }

    .detail {
      color: #666;
      font-size: 14px;
      margin-top: 5px;
    }

    .progress {
      width: 100%;
      position: relative;
      height: 3px;
      border-radius: 5px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.1);
      margin-top: 20px;
      div {
        width: 20%;
        background: rgba(255, 255, 255, 0.3);
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
      }
    }
    .time {
      font-size: 12px;
      color: #aaa;
      margin-top: 5px;
      display: flex;
      flex-direction: row;
      span {
        flex: 1;
      }
      .end {
        text-align: right;
      }
      .start {
        text-align: left;
      }
    }
  }
}
</style>